<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="com.fjrcloud.entity.Formalities" contentType="text/html;charset=UTF-8" %>
<%@ page import="com.fjrcloud.entity.Land" contentType="text/html;charset=UTF-8" %>
<%@ page import="com.fjrcloud.entity.Basement" %>
<%@ page import="com.fjrcloud.entity.HousingNature" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>建筑认定</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../plugins/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">

    <style>
        table{
            margin-left: auto;
            margin-right: auto;
        }
        table td{
            width: 12.5%;
            height: 4rem;
            line-height: 20px;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
        }
        table,tr,td{border:solid 1px;}
        table thead tr{border-color:rgba(255,255,255,0)}

        table td.title{
            background: #e7eaec;
        }
        table tbody tr[data-id]:hover {
            background-color: #edf5fa;
            cursor: pointer;
        }

        @media print {
            .not-print{ display:none;}
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInUp">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox">
                    <div class="ibox-title not-print">
                        <h5>房屋信息</h5>
                        <div class="ibox-tools">
                            <button class="btn btn-primary btn-xs addHousingDetail" disabled>添加房屋信息</button>
                            <button class="btn btn-primary btn-xs open"><i class="fa fa-user"></i></button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <table>
                                    <thead>
                                        <tr>
                                            <th colspan="8" style="text-align: center;"><h1>房屋认证补偿表</h1></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>档案号</td>
                                        <td colspan="3" style="padding: 0;" class="code"></td>
                                        <td>房屋座落</td>
                                        <td colspan="3" style="padding: 0;" class="addr"></td>
                                    </tr>
                                    <tr>
                                        <td>被征收人</td>
                                        <td colspan="3" style="padding: 0;" class="name"></td>
                                        <td>身份证号码</td>
                                        <td colspan="3" style="padding: 0;" class="idno"></td>
                                    </tr>
                                    <tr>
                                        <td>房屋结构/层数</td>
                                        <td colspan="3" style="padding: 0;" class="layer"></td>
                                        <td>被征收人户籍地址</td>
                                        <td colspan="3" style="padding: 0;"></td>
                                    </tr>
                                    </tbody>
                                    <thead>
                                        <tr>
                                            <td colspan="8" class="title">手续完整</td>
                                        </tr>
                                        <tr>
                                            <td>性质</td>
                                            <td>第几层</td>
                                            <td>面积</td>
                                            <td>结构</td>
                                            <td>折数</td>
                                            <td>认定补偿安置面积</td>
                                            <td>被认定不予补偿安置面积</td>
                                            <td>备注</td>
                                        </tr>
                                    </thead>
                                    <tbody class="complete">
                                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                        <tr><td>小计</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    </tbody>
                                    <thead>
                                        <tr>
                                            <td colspan="8" class="title">手续不完整</td>
                                        </tr>
                                        <tr>
                                            <td>性质</td>
                                            <td>第几层</td>
                                            <td>面积</td>
                                            <td>结构</td>
                                            <td>折数</td>
                                            <td>认定补偿安置面积</td>
                                            <td>被认定不予补偿安置面积</td>
                                            <td>备注</td>
                                        </tr>
                                    </thead>
                                    <tbody class="incomplete">
                                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                        <tr><td>小计</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    </tbody>
                                    <thead>
                                        <tr>
                                            <td colspan="8" class="title">无手续</td>
                                        </tr>
                                        <tr>
                                            <td>性质</td>
                                            <td>第几层</td>
                                            <td>面积</td>
                                            <td>结构</td>
                                            <td>折数</td>
                                            <td>认定补偿安置面积</td>
                                            <td>被认定不予补偿安置面积</td>
                                            <td>备注</td>
                                        </tr>
                                    </thead>
                                    <tbody class="without">
                                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                        <tr><td>小计</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <%--<script src="../js/content.js?v=1.0.0"></script>--%>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/date.extension.js"></script>
    <script src="../js/business.js"></script>

    <script src="../plugins/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <script>

        var master;

        var methods = business('${path}','${result_success}');

        function addhtml() {
            var html ='\
                    <div class="ibox-content" style="overflow: hidden;height: 100%;">\
                        <form class="form-horizontal" method="post">\
                            <input name="id" type="number" style="display: none;">\
                            <input name="masterId" type="number" style="display: none;">\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">性质：</label>\
                                <div class="col-sm-10">\
                                    <select class="form-control" name="nature">\
                                    <c:set var="enumValues" value="<%=HousingNature.values() %>"/>\
                                    <c:forEach items="${enumValues }" var="enumValue">\
                                        <option value="${enumValue}">${enumValue.label }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">手续：</label>\
                                <div class="col-sm-10">\
                                <c:set var="enumValues" value="<%=Formalities.values() %>"/>\
                                <c:forEach items="${enumValues}" var="enumValue">\
                                    <div class="radio-inline i-checks"><label><input type="radio" value="${enumValue }" name="formalities-class"> <i></i> ${enumValue.label }</label></div>\
                                </c:forEach>\
                                    <select class="form-control" name="landStandardId">\
                                    <c:forEach items="${standards}" var="item">\
                                        <option value="${item.id}" class="${item.formalities }">${item.name }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">房屋结构：</label>\
                                <div class="col-sm-10">\
                                    <div class="row">\
                                        <div class="col-sm-6" style="padding-right: 0;">\
                                            <select class="form-control" name="structureId">\
                                            <c:forEach items="${structures }" var="structure">\
                                                <option value="${structure.id}">${structure.name }</option>\
                                            </c:forEach>\
                                            </select>\
                                        </div>\
                                        <div class="col-sm-6" style="padding-left: 0;">\
                                            <select class="form-control" name="structureLevelId">\
                                            <c:forEach items="${structureLevels }" var="level">\
                                                <option value="${level.id}" class-id="${level.structure.id}">${level.name }</option>\
                                            </c:forEach>\
                                            </select>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">房屋成新：</label>\
                                <div class="col-sm-10">\
                                    <select class="form-control" name="structureIntoNewId">\
                                    <c:forEach items="${structureIntoNews }" var="intoNew">\
                                        <option value="${intoNew.id}">${intoNew.name }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">二次装修：</label>\
                                <div class="col-sm-10">\
                                    <select class="form-control" name="decorateLevelId">\
                                    <c:forEach items="${decorateLevels }" var="decorate">\
                                        <option value="${decorate.id}">${decorate.name }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">装修成新：</label>\
                                <div class="col-sm-10">\
                                    <select class="form-control" name="decorateIntoNewId">\
                                    <c:forEach items="${decorateIntoNews }" var="intoNew">\
                                        <option value="${intoNew.id}">${intoNew.name }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">第几层：</label>\
                                <div class="col-sm-10">\
                                    <div class="input-group">\
                                        <input type="number" class="form-control" name="layer">\
                                        <span class="input-group-addon" style="border-left: 0;"><input type="checkbox" name="attic" value="1"></span>\
                                        <span class="input-group-addon">夹层、阁楼</span>\
                                        <span class="input-group-addon" style="border-left: 0;"><input type="checkbox" name="atticHighly" value="1"></span>\
                                        <span class="input-group-addon">层高小于2.2m</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div id="basement" class="form-group" style="display: none;">\
                                <label class="col-sm-2 control-label">层类型：</label>\
                                <div class="col-sm-10">\
                                    <select class="form-control" name="basement">\
                                    <c:set var="basements" value="<%=Basement.values() %>"/>\
                                    <c:forEach items="${basements }" var="basement">\
                                        <option value="${basement}">${basement.label }</option>\
                                    </c:forEach>\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">面积：</label>\
                                <div class="col-sm-10">\
                                    <div class="input-group">\
                                        <input type="number" min=0 class="form-control" name="area"> <span class="input-group-addon">m²</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">备注：</label>\
                                <div class="col-sm-10">\
                                    <textarea class="form-control" style="resize:none" name="description"></textarea>\
                                </div>\
                            </div>\
                        </form>\
                    </div>';
            return html;
        }

        function natureConversion(value) {
        <c:set var="enumValues" value="<%=HousingNature.values() %>"/>
        <c:forEach items="${enumValues }" var="enumValue">
            if (value == "${enumValue}" ) {
                return "${enumValue.label }"
            }
        </c:forEach>
            if ($.isEmptyObject(value))
                return "";
        }
        function tableHtml() {

            $('.code').text(master.code);
            $('.addr').text(master.collectAddress);
            $('.name').text(master.name);
            $('.idno').text(master.idNo);

            $.post(
                "${path}/api/identified/housing/find",
                {masterId:master.id},
                function (result) {
                    if(result.code == "${result_success}"){

                        $('table tbody.complete').html('');
                        $('table tbody.incomplete').html('');
                        $('table tbody.without').html('');

                        var complete = {area:0,compensate:0};
                        var incomplete = {area:0,compensate:0};
                        var without = {area:0,compensate:0};

                        var structure;
                        var layer = 0;
                        $(result.data.content).each(function () {

                            var compensate = this.area*this.landStandard.ratio/100.0;

                            var html = '\
                                <tr data-id='+this.id+'>\
                                    <td>'+natureConversion(this.nature)+'</td>\
                                    <td>'+this.layer+'</td>\
                                    <td>'+this.area+'</td>\
                                    <td>'+this.structureLevel.structure.name+' '+this.structureLevel.name+'</td>\
                                    <td>'+this.landStandard.ratio+'%</td>\
                                    <td>'+compensate+'</td>\
                                    <td>'+Math.subtraction(this.area,compensate,2)+'</td>\
                                    <td>'+this.description+'</td>\
                                </tr>';
                            if(this.landStandard.formalities == 'complete'){
                                $('table tbody.complete').append(html);
                                complete.area+=this.area;
                                complete.compensate+=compensate;
                            }else if(this.landStandard.formalities == 'incomplete'){
                                $('table tbody.incomplete').append(html);
                                incomplete.area+=this.area;
                                incomplete.compensate+=compensate;
                            }else if(this.landStandard.formalities == 'without'){
                                $('table tbody.without').append(html);
                                without.area+=this.area;
                                without.compensate+=compensate;
                            }

                            if(this.layer == 1)
                                structure = this.structureLevel.structure.name;

                            if((this.layer < 0 &&this.basement=='MoreThanHalf') || (this.layer > 0 && this.attic != true && this.atticHighly != true))
                                layer++;
                        });

                        $('table tbody.complete').append('<tr><td>小计</td><td>'+complete.area+'</td><td></td><td></td><td></td><td>'+complete.compensate+'</td><td></td><td></td></tr>');
                        $('table tbody.incomplete').append('<tr><td>小计</td><td>'+incomplete.area+'</td><td></td><td></td><td></td><td>'+incomplete.compensate+'</td><td></td><td></td></tr>');
                        $('table tbody.without').append('<tr><td>小计</td><td>'+without.area+'</td><td></td><td></td><td></td><td>'+without.compensate+'</td><td></td><td></td></tr>');

                        $('table .layer').text(structure+layer+'层');
                    }else{
                        layer.msg(result.data);
                    }
                },
                'json'
            );
        }

        function initOpenUI(layero,index) {
            $(layero).find('input[name="masterId"]').attr('value',master.id);

            $(layero).on('ifClicked','input[name="formalities-class"]', function(){
                $('select[name="landStandardId"]').val('');
                $('select[name="landStandardId"] option').attr('selected',false);
                $('select[name="landStandardId"] option').hide();
                var value = $(this).val();
                $('select[name="landStandardId"]').find('.'+value).show();
                $('select[name="landStandardId"]').find('.'+value+':first').attr('selected',true);
            });
            $(layero).on('change','select[name="structureId"]', function(){
                var structureId = $(this).val();

                $('select[name="structureLevelId"]').val('');
                $('select[name="structureLevelId"] option').hide();
                $('select[name="structureLevelId"] option[class-id="'+structureId+'"]').show();
                $('select[name="structureLevelId"] option[class-id="'+structureId+'"]:first').attr('selected',true);

            });
            $(layero).find('.layui-layer-content').css('height','auto');
            $(layero).on('keyup','input[name="layer"]',function () {

                if($(this).val() < 0){
                    $('#basement').show();
                }else{
                    $('#basement').hide();
                }
            });
            $(layero).on('change','input[name="atticHighly"]',function () {
                if(this.checked){
                    $("input[name='attic']").attr("disabled",true);
                    $('input[name="attic"]')[0].checked = true;
                }else{
                    $("input[name='attic']").attr("disabled",false);
                }
            });

            $(layero).find('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $('select[name="landStandardId"]').val('');
            $('select[name="landStandardId"] option').hide();

            $('select[name="structureLevelId"]').val('');
            $('select[name="structureLevelId"] option').hide();

            var structureId = $('select[name="structureId"]').val();
            $('select[name="structureLevelId"] option[class-id="'+structureId+'"]').show();
            $('select[name="structureLevelId"] option[class-id="'+structureId+'"]:first').attr('selected',true);
        }

        function save(index, layero) {
            var options ={
                type: "post",
                url: "${path}/api/identified/housing/save",
                dataType: "json",
                uploadProgress: function (event, position, total, percentComplete) {},
                success: function (result) {
                    if (result.code == "${result_success}") {
                        layer.close(index);
                        layer.msg("保存成功！");
                        tableHtml();
                    }else {
                        layer.msg(result.data);
                    }
                }
            };

            $(layero).find('form').ajaxSubmit(options);
        }

        $(document).ready(function () {

            $('.open').click(function () {

                var dialog = methods.household().dialog();
                layer.open({
                    title:'档案查询',
                    type: 1,
                    area: ['600px','auto'],
                    content: dialog.html,
                    btn:['查看','取消'],
                    success:function (layero, index) {
                        dialog.init(layero);
                    },
                    yes: function(index, layero){
                        master = dialog.result();
                        if($.isEmptyObject(master)){
                            layer.msg("未查询到唯一的结果，请详细填写查询条件");
                        }else{
                            layer.close(index);
                            tableHtml();
                            $('button').removeAttr('disabled');
                        }
                    }
                });
            });

            $('.addHousingDetail').click(function () {

                layer.open({
                    type: 1,
                    area: ['600px','auto'],
                    content: addhtml(),
                    btn:['添加','取消'],
                    success:function (layero, index) {
                        initOpenUI(layero,index);
                    },
                    yes: function(index, layero){
                        save(index,layero);
                    }
                });
            });

            $('table tbody').on('click','tr',function () {
                var id = $(this).attr('data-id');
                if($.isEmptyObject(id)){
                    return false;
                }

                $.post(
                    "${path}/api/identified/housing/get",
                    {id:id},
                    function (result) {
                        if (result.code == "${result_success}") {
                            layer.open({
                                type: 1,
                                area: ['600px','auto'],
                                content: addhtml(),
                                btn:['更新','删除','取消'],
                                success:function (layero, index) {
                                    $(layero).find('input[name="id"]').val(result.data.id);
                                    $(layero).find('input[name="masterId"]').val(result.data.master.id);

                                    $(layero).find('input[name="formalities-class"][value="'+result.data.landStandard.formalities+'"]').attr('checked','checked');

                                    $(layero).find('input[name="layer"]').val(result.data.layer);

                                    $(layero).find('input[name="attic"]').attr('checked',result.data.attic);
                                    $(layero).find('input[name="atticHighly"]').attr('checked',result.data.atticHighly);
                                    if(result.data.atticHighly == true){
                                        $(layero).find('input[name="attic"]').attr('disabled',true);
                                    }
                                    $('select[name="basement"] option[value="'+result.data.basement+'"]').attr('selected',true);
                                    $(layero).find('input[name="area"]').val(result.data.area);
                                    $(layero).find('textarea[name="description"]').val(result.data.description);

                                    initOpenUI(layero,index);

                                    $(layero).find('select[name="landStandardId"] option.'+result.data.landStandard.formalities).show();
                                    $(layero).find('select[name="landStandardId"]').val(result.data.landStandard.id);

                                    var structureId = result.data.structureLevel.structure.id;
                                    $('select[name="structureId"] option[value="'+structureId+'"]').attr('selected',true);
                                    $('select[name="structureLevelId"] option').hide();
                                    $('select[name="structureLevelId"] option[class-id="'+structureId+'"]').show();
                                    $('select[name="structureLevelId"] option[value="'+result.data.structureLevel.id+'"]').attr('selected',true);

                                    $('select[name="structureIntoNewId"] option[value="'+result.data.structureIntoNew.id+'"]').attr('selected',true);
                                    $('select[name="decorateLevelId"] option[value="'+result.data.decorateLevel.id+'"]').attr('selected',true);
                                    $('select[name="decorateIntoNewId"] option[value="'+result.data.decorateIntoNew.id+'"]').attr('selected',true);

                                    $('select[name="nature"] option[value="'+result.data.nature+'"]').attr('selected',true);

                                    if(result.data.layer<0){
                                        $(layero).find('#basement').show();
                                    }
                                },
                                yes: function(index, layero){
                                    save(index,layero);
                                },
                                btn2:function (index, layero) {

                                    $.post(
                                        "${path}/api/identified/housing/del",
                                        {id:id},
                                        function (result) {
                                            if (result.code == "${result_success}") {
                                                layer.msg("删除成功");
                                                tableHtml();
                                            }else{
                                                layer.msg(result.data);
                                            }
                                        },
                                        'json'
                                    );
                                }
                            });
                        }else{
                            layer.msg(result.data);
                        }
                    },
                    'json'
                );


            });
        });
    </script>

</body>

</html>
